<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>学生及老师课程安排-日历</title>
  <link rel="stylesheet" href="../CSS/日历2.css">
</head>
<body>
<iframe class="obj1" src="../head.html" frameborder="0" width="1300px" height="110px" scrolling="no"></iframe>
<div id="app" v-cloak>
  <div class="in-body">
    <div class="top-class">

      <div class="top-left-tips">
        <span :class="{'change-color-tips':nowNumber==1}" @click="changeTips(1)">时间视图</span><span :class="{'change-color-tips':nowNumber==2}" class="class-left" @click="changeTips(2)">老师视图</span><span :class="{'change-color-tips':nowNumber==3}" class="class-left" @click="changeTips(3)">教室视图</span>
        <div style="margin-top: 15px" class="word-day">
          <span v-show="nowNumber==1" class="word-week" :class="{'color-word-ban':isActive==1}" @click="dayClick(1)">周</span><span class="word-week" v-show="nowNumber==1" :class="{'color-word-ban':isActive==2}" @click="dayClick(2)">月</span><span v-show="nowNumber==1" style="font-size: 11px;">双击下方表格空白处可排课</span>
        </div>

      </div>
      <div class="top-mid-title">
        <p v-show="isActive==1" style="text-align: center;"><span @click="leftClick"  style="font-weight: 600">&lt;&nbsp;&nbsp;</span> {{nowYear}}年{{startTime}}-{{endTime}} <span style="font-weight: 600" @click="rightClick">&gt;&nbsp;&nbsp;</span></p>
        <p  v-show="isActive==2" style="text-align: center;"><span @click="leftClickMonth" style="font-weight: 600">&lt;&nbsp;&nbsp;</span> {{nowYear}}年{{nowMonth}}月 <span style="font-weight: 600" @click="rightClickMonth">&gt;&nbsp;&nbsp;</span></p>
        <div class="top-mid-color">
          <div class="color-noclass"></div>
          <span>未上课</span>
          <div class="color-yesclass" style="margin-left:20px;"></div>
          <span>已上课</span>
        </div>
      </div>
      <div class="in-body-content">
        <!-- 周视图 -->
        <table style="border-collapse: collapse;" v-show="isActive==1">
          <thead style="background-color: rgb(239, 243, 248);">
          <tr class="theard">
            <td>时间</td>
            <td>周一({{cupnowDateList[0]}})</td>
            <td>周二({{cupnowDateList[1]}})</td>
            <td>周三({{cupnowDateList[2]}})</td>
            <td>周四({{cupnowDateList[3]}})</td>
            <td>周五({{cupnowDateList[4]}})</td>
            <td>周六({{cupnowDateList[5]}})</td>
            <td>周日({{cupnowDateList[6]}})</td>
          </tr>
          </thead>
          <tbody class="tbody-class">
          <tr>
            <td style="text-align: center">上午</td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[0].weeks.morning">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[1].weeks.morning">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[2].weeks.morning">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[3].weeks.morning">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[4].weeks.morning">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[5].weeks.morning">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[6].weeks.morning">  {{item.time}}</div>
            </td>
          </tr>
          <tr>
            <td style="text-align: center">中午</td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[0].weeks.afternoon">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[1].weeks.afternoon">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[2].weeks.afternoon">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[3].weeks.afternoon">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[4].weeks.afternoon">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[5].weeks.afternoon">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[6].weeks.afternoon">  {{item.time}}</div>
            </td>
          </tr>
          <tr>
            <td style="text-align: center">下午</td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[0].weeks.evening">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[1].weeks.evening">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[2].weeks.evening">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[3].weeks.evening">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[4].weeks.evening">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[5].weeks.evening">  {{item.time}}</div>
            </td>
            <td @click="tdclick">
              <div class="class-ban-day-blue" v-for="item in weekList[6].weeks.evening">  {{item.time}}</div>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- 月视图 -->
        <table style="border-collapse: collapse;" v-show="isActive==2">
          <thead style="background-color: rgb(239, 243, 248);">
          <tr class="theard">
            <td>周一({{cupnowDateList[0]}})</td>
            <td>周二({{cupnowDateList[1]}})</td>
            <td>周三({{cupnowDateList[2]}})</td>
            <td>周四({{cupnowDateList[3]}})</td>
            <td>周五({{cupnowDateList[4]}})</td>
            <td>周六({{cupnowDateList[5]}})</td>
            <td>周日({{cupnowDateList[6]}})</td>
          </tr>
          </thead>
          <tbody class="tbody-class">
          <tr v-for="(n,i) in dataList.length/7">
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">

                {{dataList[(7*i)+0].day}}
              </div>
              <div class="class-ban-day-blue" v-show="dataList[(7*i)+0].time" v-for="item in dataList[(7*i)+0].time"> {{item.intimes}}</div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">
                {{dataList[(7*i)+1].day}}
              </div>
              <div class="class-ban-day-gary" v-show="dataList[(7*i)+1].time" v-for="item in dataList[(7*i)+1].time"> {{item.intimes}}</div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">
                {{dataList[(7*i)+2].day}}
              </div>
              <div class="class-ban-day-blue" v-show="dataList[(7*i)+2].time" v-for="item in dataList[(7*i)+2].time"> {{item.intimes}}</div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">
                {{dataList[(7*i)+3].day}}
              </div>
              <div class="class-ban-day-blue" v-show="dataList[(7*i)+3].time" v-for="item in dataList[(7*i)+3].time"> {{item.intimes}}</div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">
                {{dataList[(7*i)+4].day}}
              </div>
              <div class="class-ban-day-blue" v-show="dataList[(7*i)+4].time" v-for="item in dataList[(7*i)+4].time"> {{item.intimes}}</div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">
                {{dataList[(7*i)+5].day}}
              </div>
              <div class="class-ban-day-blue" v-show="dataList[(7*i)+5].time" v-for="item in dataList[(7*i)+5].time"> {{item.intimes}}</div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute">
                {{dataList[(7*i)+6].day}}
              </div>
              <div class="class-ban-day-blue" v-show="dataList[(7*i)+6].time" v-for="item in dataList[(7*i)+6].time"> {{item.intimes}}</div>

            </td>
          </tr>
          </tbody>
        </table>
        <!-- 老师视图 -->
        <table style="border-collapse: collapse;" v-show="isActive==0&&nowNumber==2">
          <thead style="background-color: rgb(239, 243, 248);">
          <tr class="theard">
            <td>老师</td>
            <td>周一({{cupnowDateList[0]}})</td>
            <td>周二({{cupnowDateList[1]}})</td>
            <td>周三({{cupnowDateList[2]}})</td>
            <td>周四({{cupnowDateList[3]}})</td>
            <td>周五({{cupnowDateList[4]}})</td>
            <td>周六({{cupnowDateList[5]}})</td>
            <td>周日({{cupnowDateList[6]}})</td>
          </tr>
          </thead>
          <tbody class="tbody-class">
          <tr v-for="item in teacherList">
            <td style="text-align: center">{{item.name}}</td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week1">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week2">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week3">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week4">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week5">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
              </div>
            </td>

          </tr>
          </tbody>
        </table>
        <!-- 教师视图 -->
        <table style="border-collapse: collapse;" v-show="isActive==0&&nowNumber==3">
          <thead style="background-color: rgb(239, 243, 248);">
          <tr class="theard">
            <td>教室</td>
            <td>周一({{cupnowDateList[0]}})</td>
            <td>周二({{cupnowDateList[1]}})</td>
            <td>周三({{cupnowDateList[2]}})</td>
            <td>周四({{cupnowDateList[3]}})</td>
            <td>周五({{cupnowDateList[4]}})</td>
            <td>周六({{cupnowDateList[5]}})</td>
            <td>周日({{cupnowDateList[6]}})</td>
          </tr>
          </thead>
          <tbody class="tbody-class">
          <tr v-for="item in roomList">
            <td style="text-align: center">{{item.name}}</td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week1">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week2">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week3">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week4">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week5">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
              </div>
            </td>
            <td @click="tdclick" class="class-relative">
              <div class="class-absolute-teacher">
                <div class="class-ban-day-blue" v-for="one in item.week6">  {{one.class}}</div>
              </div>
            </td>

          </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
</div>
<script src="../JS/vue.js"></script>
<script src="../JS/日历2.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      isActive:1,
      nowNumber:1,
      lastDay:"",
      nextDay:"",
      startTime:"",
      nowYear:"",
      nowMonth:"",
      endTime:"",
      arr:[],
      roomList:[
        {
          name:"1教室",
          week1:[{class:"按天"},{class:"11:30"}],
          week2:[{class:"按天"},{class:"11:30"}],
          week3:[{class:"按天"},{class:"11:30"}],
          week4:[{class:"按天"},{class:"11:30"}],
          week5:[{class:"按天"},{class:"11:30"}],
          week6:[{class:"按天"},{class:"11:30"}],
          week7:[{class:"按天"},{class:"11:30"}]},
        {
          name:"广场3教室",
          week1:[{class:"按天"},{class:"11:30"}],
          week2:[{class:"按天"},{class:"8:30"}],
          week3:[{class:"按天"},{class:"10:30"}],
          week4:[{class:"按天"},{class:"11:30"}],
          week5:[{class:"按天"},{class:"11:30"}],
          week6:[{class:"按天"},{class:"11:30"}],
          week7:[{class:"按天"},{class:"11:30"}]}
      ],
      teacherList:[{
        name:"张龙",
        week1:[{class:"按天"},{class:"11:30"}],
        week2:[{class:"按天"},{class:"11:30"}],
        week3:[{class:"按天"},{class:"11:30"}],
        week4:[{class:"按天"},{class:"11:30"}],
        week5:[{class:"按天"},{class:"11:30"}],
        week6:[{class:"按天"},{class:"11:30"}],
        week7:[{class:"按天"},{class:"11:30"}]},
        {
          name:"姚明",
          week1:[{class:"按天"},{class:"11:30"}],
          week2:[{class:"按天"},{class:"8:30"}],
          week3:[{class:"按天"},{class:"10:30"}],
          week4:[{class:"按天"},{class:"11:30"}],
          week5:[{class:"按天"},{class:"11:30"}],
          week6:[{class:"按天"},{class:"11:30"}],
          week7:[{class:"按天"},{class:"11:30"}]}
      ],


      weekList:[{weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
        {weeks:{morning:[{time:"按月"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
        {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
        {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
        {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
        {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}},
        {weeks:{morning:[{time:"按天"},{time:"按天"}],afternoon:[{time:"11:10"},{time:"11:30"}],evening:[{time:"18:10"},{time:"18:30"}]}}],


      dataList:[{day:"30"},{day:"1",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"2"},{day:"3"},{day:"4"},{day:"5",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"6"},{day:"7"},{day:"8"},{day:"9"},{day:"10"},{day:"11"},{day:"12"},{day:"13"},{day:"14"},{day:"15"},{day:"16",time:[{intimes:"按天"},{intimes:"11:30"}]},{day:"17"},{day:"18"},{day:"19"},{day:"20"},{day:"21"},{day:"22"},{day:"23",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"24"},{day:"25"},{day:"26",time:[{intimes:"按天"},{intimes:"按天"}]},{day:"27"},{day:"28"},{day:"29"},{day:"30"},{day:"31"},{day:"1",time:[{intimes:"按天"},{intimes:"18:30"}]},{day:"2"},{day:"3"},{day:"4"},{day:"5"},{day:"6"},{day:"7"},{day:"8"},{day:"9"},{day:"10"}]
    },
    methods:{
      leftClickMonth(){
        this.nowMonth = this.nowMonth - 1;
        if (this.nowMonth < 1) {
          this.nowMonth = 12;
          this.nowYear = this.nowYear - 1;
        }
        this.findToMonth()
      },
      rightClickMonth() {
        this.nowMonth = this.nowMonth + 1;
        if (this.nowMonth > 12) {
          this.nowMonth = 1;
          this.nowYear = this.nowYear + 1;
        }
        this.findToMonth()

      },
      findToMonth(){
        let fatherDataList = getDateInfo(this.nowYear, this.nowMonth)
        this.dataList.forEach((item,index)=>{
          item.day =  fatherDataList[index].day
        })
      },
      dayClick(count){
        this.isActive=count
        this.nowNumber = 1
      },
      // 选择视图
      changeTips(count){
        this.nowNumber=count
        if(this.nowNumber == 1){
          this.isActive = 1
        }else{
          this.isActive = 0
        }

      },
      nowDate(type, dates,date){
        var now = ""
        if(date){
          now = new Date(date);
        }else{
          now = new Date()
        }

        var nowTime = now.getTime();
        var day = now.getDay();
        var longTime = 24 * 60 * 60 * 1000;
        var n = longTime * 7 * (dates || 0);
        if (type == "s") {
          var dd = nowTime - (day - 1) * longTime + n;
        };
        if (type == "e") {
          var dd = nowTime + (7 - day) * longTime + n;
        };
        dd = new Date(dd);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;
        var d = dd.getDate();
        m = m < 10 ? "0" + m: m;
        d = d < 10 ? "0" + d: d;
        var day = y + "-" + m + "-" + d;
        return day;

      },
      leftClick(){
        var d=this.getMonDate(this.nowDate("s",-1,this.arr[0]))
        var arr=[];
        for(var i=0; i<7; i++)
        {
          arr.push(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate());
          d.setDate(d.getDate()+1);
        }
        this.arr = arr
        this.changeTime()
        console.log(this.arr[0])

      },
      rightClick(){
        var d=this.getMonDate(this.nowDate("s",1,this.arr[6]))
        var arr=[];
        for(var i=0; i<7; i++)
        {
          arr.push(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate());
          d.setDate(d.getDate()+1);
        }
        this.arr = arr
        this.changeTime()
        console.log(this.arr[6])
      },
      getWeeks(){

        var d=this.getMonDate(this.nowDate("s"))
        var arr=[];
        for(var i=0; i<7; i++)
        {
          arr.push(d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate());
          d.setDate(d.getDate()+1);
        }
        this.arr = arr

      },
      tdclick(){
        console.log("dianji")
      },
      getMonDate(data){
        var d=new Date(data)
        day=d.getDay()
        date=d.getDate()
        if(day==1)
          return d;
        if(day==0)
          d.setDate(date-6);
        else
          d.setDate(date-day+1);
        return d;
      },
      getDayName(day)
      {
        var day=parseInt(day);
        if(isNaN(day) || day<0 || day>6)
          return false;
        var weekday=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
        return weekday[day];
      },
      changeTime(){
        let start = this.arr[0]
        let timelist =  start.split("-")
        this.startTime =  timelist[1]+"月"+timelist[2]+"日"


        let start2 = this.arr[6]
        let timelist1 =  start2.split("-")
        this.endTime =  timelist1[1]+"月"+timelist1[2]+"日"

      },
    },
    mounted(){
      this.getWeeks()
      this.changeTime()
      console.log()
      let date = new Date();
      this.nowYear = date.getFullYear();
      this.nowMonth = date.getMonth() + 1;
      let fatherDataList = getDateInfo(this.nowYear, this.nowMonth)
      this.dataList.forEach((item,index)=>{
        item.day =  fatherDataList[index].day
      })
      console.log(fatherDataList)
    },

    computed:{
      cupnowDateList(){
        let array = []
        this.arr.forEach((item,i)=>{
          let ary = item.split("-")

          array.push(ary[1]+"/"+ary[2])
        })
        return array
      }

    }
  })



</script>
</body>
</html>